<template>
  <div class="content_out">
    <div class="content">
      <div class="input_all">
        Project Name:
        <el-input v-model="upladList.projectName" />
      </div>

      <div class="btn_all">
        <!-- <el-popover class="mr" placement="top-start" width="200" trigger="hover"
          content="Click to choose and upload your audio files"> -->

        <el-upload
          title="Click to choose and upload your audio files"
          class="upload-demo"
          action=""
          accept=".audio,.wav"
          multiple
          :file-list="fileList"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :http-request="handleAudioToBase64">
          <el-button size="small">Upload Audio</el-button>
        </el-upload>

        <!-- </el-popover> -->

        <el-popover
          class="mr"
          placement="top-start"
          width="200"
          trigger="hover"
          content="Clear all files">
          <el-button slot="reference" @click="handleResetAll" type="danger"
            >Reset</el-button
          >
        </el-popover>

        <el-upload
          title="Click to choose and upload your text files"
          class="upload-demo"
          action=""
          accept=".txt"
          multiple
          :file-list="fileList"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :http-request="handleUpload">
          <el-button size="small">Upload Text</el-button>
        </el-upload>
      </div>

      <div class="show_file" ref="show_file">
        <div class="file_in">
          <div class="none_item" v-if="upladList.data.length <= 0">
            Please upload your corpus here.
          </div>

          <div
            class="item"
            :class="{
              item_bgc: !(
                item.hasOwnProperty('name') && item.hasOwnProperty('text')
              ),
              item_bgc_1: index == showIndex ? true : false
            }"
            v-for="(item, index) in upladList.data"
            :key="item.name"
            v-if="item.audio">
            <div class="left_audio bgc">
              <span>{{ item.name }}</span>
              <audio controls :src="item.audio">
                <!-- <source  > -->
              </audio>
              <!-- <span @click="dialogVisible = true" class="delete">X</span> -->
              <span @click="handleDelete(item, index)" class="delete">X</span>
            </div>

            <!-- <div class=" bgc bgc_2"
              :class="{ right_text: !item.hasOwnProperty('text'), right_bgc: index == showIndex ? true : false }"
              @click="handleReset(item, index)"> -->

            <div
              class="bgc bgc_2"
              :class="{
                right_text: !item.hasOwnProperty('text'),
                right_bgc: item.show
              }"
              @click="handleReset(item, index)">
              <span v-if="item.text">{{ item.text }}</span>
              <span v-else-if="!item.text && index == showIndex"></span>
              <span v-else-if="!item.text"
                >Transcription is not found. Click here to upload or
                input.</span
              >
              <span
                class="delete"
                v-if="item.text"
                @click.stop="handleDeleteTxt(item, index)"
                >X</span
              >
            </div>
          </div>
        </div>
      </div>

      <div v-if="showTextarea" class="change_text">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4 }"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
        <div class="btn">
          <el-button @click="textarea = ''">clear</el-button>
          <el-button @click="handleSave">save</el-button>
        </div>
      </div>

      <div class="next">
        <el-button
          :disabled="!nextFun"
          title="Please check your files"
          :class="{ suc: nextFun }"
          @click="handleJump">
          Next
        </el-button>
      </div>

      <el-dialog :visible.sync="dialogVisible" width="30%">
        <span>Are you sure to delete this audio?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="sureDelete">Delete</el-button>
        </span>
      </el-dialog>

      <el-dialog :visible.sync="dialogVisible1" width="30%">
        <span>Are you sure to delete this text?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">Cancel</el-button>
          <el-button type="primary" @click="saveDeleteText">Delete</el-button>
        </span>
      </el-dialog>

      <!-- <div class="footer_text">
        <div class="title">Read before upload:</div>
        <div class="title">Supported file types:</div>
        <div class="item_1">-Audio: .wav (It is recommended that each audio does not exceeds 30 seconds.)</div>
        <div class="item_1">-Text: .txt and .lab (Only “UTF-8” codec is currently available for text files)</div>

        <div class="title">Corpus structure:</div>
        <div class="item_1">1.Each pair of audio file and text file in your corpus should have idential file names. E.g.
          the text file “piece_01.txt” will be attached to an audio file named “piece_01.wav”. For each case without
          corresponding text file, you can still input the transcriptional text manually in the text editor we provided or
          upload it again. And for each case with extra text files, those name-unmached will be removed.</div>
        <div class="item_1">2.Audio files are necessary! You should upload your audio files first because the corpus
          validations for naming and quantity depend on the audio files have been uploaded.</div>
        <div class="item_1">3.Text files are optional but recommended to upload direct although you are allowed to write
          them on the text editor we provided. The text file corresponding to a certain audio file is its plain and full
          transcription without any other prepocessing. To some extent, the accuracy of transcription will affect the
          accuracy of the alignment.</div>
      </div> -->

      <div class="mume markdown-preview">
        <h1 class="mume-header" id="exclamation-read-before-upload">
          &#x2757;&#xFE0F; Read before upload
        </h1>

        <p>
          <em
            >For more detailed information about the operations in SISU AA and
            other available tools, please see the
            <span class="doc" @click="toDoc">User Guide</span> part on the
            Documentation page.</em
          >
        </p>
        <hr />
        <h2 class="mume-header" id="loudspeaker-supported-file-types">
          &#x1F4E2; Supported file types:
        </h2>

        <ul>
          <li>
            <strong>Audio:</strong> .wav (It is recommended that each audio does
            not exceeds 30 seconds.)
          </li>
          <li>
            <strong>Text:</strong> .txt (Only &#x201C;UTF-8&#x201D; codec is
            currently available for text files.)
          </li>
        </ul>
        <hr />
        <h2 class="mume-header" id="open_file_folder-corpus-structure">
          &#x1F4C2; Corpus structure:
        </h2>

        <ul>
          <li>
            Each pair of audio file and text file in your corpus should have
            <strong>idential file names</strong>. E.g. the text file
            &#x201C;piece_01.txt&#x201D; will be attached to an audio file named
            &#x201C;piece_01.wav&#x201D;. For each case without corresponding
            text file, you can still input the transcriptional text manually in
            the text editor we provided or upload it again. And for each case
            with extra text files, those name-unmached will be removed.
          </li>
          <li>
            <strong>Audio files are necessary!</strong> You should upload your
            audio files first because the corpus validations for naming and
            quantity depend on the audio files have been uploaded.
          </li>
          <li>
            <strong
              >Text files are optional but recommended to upload direct</strong
            >
            although you are allowed to write them on the text editor we
            provided. The text file corresponding to a certain audio file is its
            plain and full transcription without any other prepocessing or
            special symbols. To a large extent, the accuracy of transcription
            will affect the accuracy of the alignment and annotations.
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { test_upload } from '@/api/tools.js'
export default {
  name: 'upload',
  data() {
    return {
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      upladList: {
        email: JSON.parse(localStorage.getItem('login'))?.email,
        projectName: '',
        data: []
      },
      textarea: '', // 输入框
      showTextarea: false, // 是否显示 输入框
      showIndex: null, // 默认选择 null 条数据
      dialogVisible: false, // 确认提示框
      dialogVisible1: false, // 确认提示框1
      deleteIndex: null, // 删除音频的index
      deleteTextIndex: null, // 删除Text的index
      deleteItem: null //
    }
  },
  mounted() {
    // console.log('初始化:', this.upladList)
    this.upladList = {
      email: JSON.parse(localStorage.getItem('login'))?.email,
      projectName: '',
      data: []
    }
  },
  updated() {
    console.log('更新后：', this.upladList)
  },
  computed: {
    nextFun() {
      let keyList = []

      this.upladList.data.forEach((item) => {
        keyList.push(...Object.values(item))
      })

      // let show = this.upladList.data[this.showIndex]?.show
      let show = this.upladList.data.every((item) => !item.show)

      if (this.upladList.data.length === 0) {
        return false
      } else {
        return keyList.length === this.upladList.data.length * 4 &&
          this.upladList.projectName &&
          show
          ? true
          : false
      }
    }
  },
  methods: {
    // 跳转到 setting 页面
    handleJump() {
      // console.log(this.upladList)
      if (this.upladList.projectName == '') {
        this.$message.warning('Please fill in the projectName name')
        return
      }
      const newData = this.upladList.data.map((item) => {
        return { ...item, audio: item.audio.split('base64,')[1] }
      })

      test_upload({
        ...this.upladList,
        data: newData
      })
        .then((res) => {
          // console.log('res', res)
          const { code, message, data } = res || {}
          if (code == 200) {
            this.$message.success('The file is uploaded successfully')
            this.$store.commit('handleUploadData', {
              bid: data?.bid,
              uid: data?.uid
            })

            this.$store.commit('handleSetPage', {
              item: {
                newName: 'Setting',
                show: false,
                path: '/tools/set',
                name: 'set'
              },
              index: 1,
              router: this.$router
            })
          } else {
            this.$message.warning(`${message}`)
          }
        })
        .catch((err) => {
          console.log('err', err)
        })
    },
    toDoc() {
      this.$store.commit('handleHighlightHelp', '/doc')
      this.$router.push({ path: '/doc#2' })
    },
    // 删除 1
    handleDelete(item, index) {
      this.dialogVisible = true
      this.deleteIndex = index
    },
    //  确定删除 1
    sureDelete() {
      this.dialogVisible = false
      this.upladList.data.splice(this.deleteIndex, 1)
    },

    // 修改
    handleReset(item, index) {
      console.log(item, index)
      const newUpladList = JSON.parse(JSON.stringify(this.upladList))

      // if (this.upladList.data[this.showIndex]?.show) {
      //   this.upladList.data[this.showIndex].text = this.textarea
      //   this.upladList.data[this.showIndex].show = false
      //   console.log('---', this.upladList)

      // }

      console.log('this.textarea', this.textarea)

      this.showTextarea = true // 显示输入框
      this.showIndex = index

      let newData = newUpladList.data.map((i, j) => {
        if (index === j) {
          return { ...i, show: true }
        } else {
          return { ...i, show: false }
        }
      })
      newUpladList.data = newData

      this.upladList = newUpladList
      this.textarea = item.text

      // console.log(item, index)
      console.log('00', newUpladList)
    },

    // 删除
    handleDeleteTxt(item, index) {
      this.dialogVisible1 = true // 显示第二个确定框
      this.deleteTextIndex = index
      this.deleteItem = item
    },
    saveDeleteText() {
      this.showTextarea = true // 显示输入框
      this.showIndex = this.deleteTextIndex
      const newUpladList = JSON.parse(JSON.stringify(this.upladList))

      let newData = newUpladList.data.map((i, j) => {
        if (this.deleteTextIndex === j) {
          return { ...i, text: '', show: true }
        } else {
          return { ...i }
        }
      })
      newUpladList.data = newData

      this.upladList = newUpladList
      this.dialogVisible1 = false
      this.textarea = this.deleteItem.text
    },

    // 清空文本框所有的内容
    handleResetAll() {
      this.upladList.data = []
      this.showTextarea = false // 关闭输入框
      this.textarea = ''
    },
    handleSave() {
      this.upladList.data[this.showIndex].text = this.textarea
      this.upladList.data[this.showIndex].show = false
      this.showTextarea = false
      this.textarea = ''
      this.showIndex = null
    },

    beforeUpload() {},

    async handleUpload(file) {
      // console.log(file.file.name, '00000')
      const fileName = file.file.name.split('.')[0]
      if (!['txt', 'lab'].includes(file.file.name.split('.')[1])) {
        this.$message.warning(`Please upload a text type file`)
        return
      }
      console.log(file)

      const fileText = await this.handleTextFile(file.file)

      let allNameList = this.upladList.data.map((item) => item.name)

      let textIndex = this.upladList.data.findIndex(
        (item) => item.name === fileName
      )

      // if (!allNameList.includes(fileName)) {
      //   this.upladList.data.push({
      //     name: fileName,
      //     text: fileText,
      //     show: false
      //   })
      // } else  // 连接下面 else的
      if (!this.upladList.data[textIndex]?.text) {
        let newUpladList = JSON.parse(JSON.stringify(this.upladList.data))

        newUpladList[textIndex].text = fileText

        this.upladList.data = newUpladList
      }

      this.upladList.data.forEach((item, index) => {
        if (fileName === item.name) {
          this.upladList.data[index].text = fileText
        }
      })

      console.log('text  ', this.upladList.data)
      return false
    },

    handleTextFile(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsText(file, 'UTF-8')
        reader.onload = function (e) {
          resolve(e.target.result)
        }
      })
    },
    AudioToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function () {
          resolve(reader.result)
        }
      })
    },

    async handleAudioToBase64(file) {
      // console.log(file.file.name,)
      const fileName = file.file.name.split('.')[0]
      if (file.file.name.split('.')[1] !== 'wav') {
        this.$message.warning(`Please upload a WAV type file`)
        return
      }
      let audioBase = await this.AudioToBase64(file.file)

      let allNameList = this.upladList.data.map((item) => item.name)

      let textIndex = this.upladList.data.findIndex(
        (item) => item.name === fileName
      )

      if (!allNameList.includes(fileName)) {
        this.upladList.data.push({
          name: fileName,
          audio: audioBase,
          show: false
        })
      } else if (!this.upladList.data[textIndex]?.audio) {
        let newUpladList = JSON.parse(JSON.stringify(this.upladList.data))

        newUpladList[textIndex].audio = audioBase

        this.upladList.data = newUpladList
      }
      this.upladList.data.forEach((item, index) => {
        if (fileName === item.name) {
          this.upladList.data[index].audio = audioBase
        }
      })

      console.log('64 ', this.upladList)
    }
  }
}
</script>

<style lang="less" scoped>
.content_out {
  width: 100%;
  display: flex;
  justify-content: center;
}

.content {
  padding: 0px 20px;
  height: 100%;
  width: 1280px;

  // width: 200px;
  .show_file {
    // padding: 0px 30px;
    width: 100%;
    // height: 100px;
    margin-bottom: 15px;

    .file_in {
      border: 1px solid #a8a8a8;
      padding: 8px;
      height: 300px;
      overflow: auto;

      .none_item {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a3a3a3;
      }

      .item {
        display: flex;
        justify-content: space-between;
        padding: 8px 6px;
        background-color: #e5fde5;
        border: 1px solid #c2d6bf;
        border-radius: 5px;

        .bgc {
          position: relative;
          width: 48%;
          background-color: #d4e7d3;
          border: 1px solid #c9dcc8;
          padding: 6px 10px;
          border-radius: 5px;

          span {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .bgc_2 {
          display: flex;
          justify-content: space-between;
        }

        .delete {
          position: absolute;
          top: -10px;
          right: -8px;

          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50%;
          background-color: #ddd;

          font-size: 12px;
        }

        .delete:hover {
          cursor: pointer;
        }

        .right_text {
          background-color: #fde6c9;
        }

        .right_bgc {
          background-color: #fde6c9;
        }

        .bgc:hover {
          background-color: #e6ede6;
          cursor: pointer;
        }

        .left_audio {
          display: flex;
          align-items: center;
          justify-content: space-between;

          audio {
            background-color: #d3e6d2;
            width: 275px;
            height: 25px;
          }
        }
      }

      .item_bgc {
        background-color: #fff3cb;
      }

      .item_bgc_1 {
        background-color: #fff3cb;
      }
    }
  }

  .change_text {
    margin-bottom: 10px;

    .btn {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;

      button {
        width: 150px;
      }

      button:nth-child(1) {
        background-color: #bc1202;
        color: #fff;
      }

      button:nth-child(2) {
        background-color: #008c00;
        color: #fff;
      }
    }
  }

  .next {
    display: flex;
    justify-content: flex-end;
  }

  .suc {
    background-color: #008c00;
    color: #fff;
  }

  .input_all {
    display: flex;
    align-items: center;
    margin: 10px 0px;
    // padding-left: 5px;

    /deep/ .el-input {
      width: 300px;
      margin-left: 15px;
    }
  }

  .btn_all {
    display: flex;
    // padding-left: 5px;
    margin-bottom: 10px;

    button {
      width: 150px;
      height: 45px;
      border-radius: 7px;
    }

    button:nth-child(2) {
      background-color: #c0504d;
    }

    .mr {
      margin-right: 120px;
      margin-left: 5px;
    }

    .upload-demo {
      button {
        background-color: #008e00 !important;
        color: #fff;
      }
    }
  }

  .footer_text {
    margin-bottom: 50px;

    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .item_1 {
      margin-bottom: 10px;
      text-indent: 10px;
    }
  }
}

code[class*='language-'],
pre[class*='language-'] {
  color: #333;
  background: none;
  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*='language-'] {
  padding: 0.8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}

pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%, 0.08);
  background: linear-gradient(
    to right,
    hsla(24, 20%, 50%, 0.1) 70%,
    hsla(24, 20%, 50%, 0)
  );
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before,
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: 0.4em;
  left: 0.6em;
  min-width: 1em;
  padding: 0 0.5em;
  background-color: hsla(24, 20%, 50%, 0.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: 0.3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: 0.4em;
}

html body {
  font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  overflow: initial;
  box-sizing: border-box;
  word-wrap: break-word;
}

html body > :first-child {
  margin-top: 0;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 16px;
  color: #000;
}

html body h1 {
  font-size: 2.25em;
  font-weight: 300;
  padding-bottom: 0.3em;
}

html body h2 {
  font-size: 1.75em;
  font-weight: 400;
  padding-bottom: 0.3em;
}

html body h3 {
  font-size: 1.5em;
  font-weight: 500;
}

html body h4 {
  font-size: 1.25em;
  font-weight: 600;
}

html body h5 {
  font-size: 1.1em;
  font-weight: 600;
}

html body h6 {
  font-size: 1em;
  font-weight: 600;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5 {
  font-weight: 600;
}

html body h5 {
  font-size: 1em;
}

html body h6 {
  color: #5c5c5c;
}

html body strong {
  color: #000;
}

html body del {
  color: #5c5c5c;
}

html body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

html body a {
  color: #08c;
  text-decoration: none;
}

html body a:hover {
  color: #00a3f5;
  text-decoration: none;
}

html body img {
  max-width: 100%;
}

html body > p {
  margin-top: 0;
  margin-bottom: 16px;
  word-wrap: break-word;
}

html body > ul,
html body > ol {
  margin-bottom: 16px;
}

html body ul,
html body ol {
  padding-left: 2em;
}

html body ul.no-list,
html body ol.no-list {
  padding: 0;
  list-style-type: none;
}

html body ul ul,
html body ul ol,
html body ol ol,
html body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

html body li {
  margin-bottom: 0;
}

html body li.task-list-item {
  list-style: none;
}

html body li > p {
  margin-top: 0;
  margin-bottom: 0;
}

html body .task-list-item-checkbox {
  margin: 0 0.2em 0.25em -1.8em;
  vertical-align: middle;
}

html body .task-list-item-checkbox:hover {
  cursor: pointer;
}

html body blockquote {
  margin: 16px 0;
  font-size: inherit;
  padding: 0 15px;
  color: #5c5c5c;
  background-color: #f0f0f0;
  border-left: 4px solid #d6d6d6;
}

html body blockquote > :first-child {
  margin-top: 0;
}

html body blockquote > :last-child {
  margin-bottom: 0;
}

html body hr {
  height: 4px;
  margin: 32px 0;
  background-color: #d6d6d6;
  border: 0 none;
}

html body table {
  margin: 10px 0 15px 0;
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

html body table th {
  font-weight: bold;
  color: #000;
}

html body table td,
html body table th {
  border: 1px solid #d6d6d6;
  padding: 6px 13px;
}

html body dl {
  padding: 0;
}

html body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

html body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

html body code {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 0.85em !important;
  color: #000;
  background-color: #f0f0f0;
  border-radius: 3px;
  padding: 0.2em 0;
}

html body code::before,
html body code::after {
  letter-spacing: -0.2em;
  content: '\00a0';
}

html body pre > code {
  padding: 0;
  margin: 0;
  font-size: 0.85em !important;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

html body .highlight {
  margin-bottom: 16px;
}

html body .highlight pre,
html body pre {
  padding: 1em;
  overflow: auto;
  font-size: 0.85em !important;
  line-height: 1.45;
  border: #d6d6d6;
  border-radius: 3px;
}

html body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

html body pre code,
html body pre tt {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

html body pre code:before,
html body pre tt:before,
html body pre code:after,
html body pre tt:after {
  content: normal;
}

html body p,
html body blockquote,
html body ul,
html body ol,
html body dl,
html body pre {
  margin-top: 0;
  margin-bottom: 16px;
}

html body kbd {
  color: #000;
  border: 1px solid #d6d6d6;
  border-bottom: 2px solid #c7c7c7;
  padding: 2px 4px;
  background-color: #f0f0f0;
  border-radius: 3px;
}

@media print {
  html body {
    background-color: #fff;
  }

  html body h1,
  html body h2,
  html body h3,
  html body h4,
  html body h5,
  html body h6 {
    color: #000;
    page-break-after: avoid;
  }

  html body blockquote {
    color: #5c5c5c;
  }

  html body pre {
    page-break-inside: avoid;
  }

  html body table {
    display: table;
  }

  html body img {
    display: block;
    max-width: 100%;
    max-height: 100%;
  }

  html body pre,
  html body code {
    word-wrap: break-word;
    white-space: pre;
  }
}

.markdown-preview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.markdown-preview .pagebreak,
.markdown-preview .newpage {
  page-break-before: always;
}

.markdown-preview pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

.markdown-preview pre.line-numbers > code {
  position: relative;
}

.markdown-preview pre.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 1em;
  font-size: 100%;
  left: 0;
  width: 3em;
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.markdown-preview pre.line-numbers .line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}

.markdown-preview pre.line-numbers .line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

.markdown-preview .mathjax-exps .MathJax_Display {
  text-align: center !important;
}

.markdown-preview:not([for='preview']) .code-chunk .btn-group {
  display: none;
}

.markdown-preview:not([for='preview']) .code-chunk .status {
  display: none;
}

.markdown-preview:not([for='preview']) .code-chunk .output-div {
  margin-bottom: 16px;
}

.scrollbar-style::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-style::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

.scrollbar-style::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(150, 150, 150, 0.66);
  border: 4px solid rgba(150, 150, 150, 0.66);
  background-clip: content-box;
}

html body[for='html-export']:not([data-presentation-mode]) {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}

html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
  position: relative;
  top: 0;
}

@media screen and (min-width: 914px) {
  html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
    padding: 2em calc(50% - 457px + 2em);
  }
}

@media screen and (max-width: 914px) {
  html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
    padding: 2em;
  }
}

@media screen and (max-width: 450px) {
  html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
    font-size: 14px !important;
    padding: 1em;
  }
}

@media print {
  html body[for='html-export']:not([data-presentation-mode]) #sidebar-toc-btn {
    display: none;
  }
}

html body[for='html-export']:not([data-presentation-mode]) #sidebar-toc-btn {
  position: fixed;
  bottom: 8px;
  left: 8px;
  font-size: 28px;
  cursor: pointer;
  color: inherit;
  z-index: 99;
  width: 32px;
  text-align: center;
  opacity: 0.4;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  #sidebar-toc-btn {
  opacity: 1;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  padding: 32px 0 48px 0;
  font-size: 14px;
  box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
  box-sizing: border-box;
  overflow: auto;
  background-color: inherit;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc::-webkit-scrollbar {
  width: 8px;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(150, 150, 150, 0.66);
  border: 4px solid rgba(150, 150, 150, 0.66);
  background-clip: content-box;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  a {
  text-decoration: none;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  ul {
  padding: 0 1.6em;
  margin-top: 0.8em;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  li {
  margin-bottom: 0.8em;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .md-sidebar-toc
  ul {
  list-style-type: none;
}

html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .markdown-preview {
  left: 300px;
  width: calc(100% - 300px);
  padding: 2em calc(50% - 457px - 150px);
  margin: 0;
  box-sizing: border-box;
}

@media screen and (max-width: 1274px) {
  html
    body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
    .markdown-preview {
    padding: 2em;
  }
}

@media screen and (max-width: 450px) {
  html
    body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
    .markdown-preview {
    width: 100%;
  }
}

html
  body[for='html-export']:not([data-presentation-mode]):not(
    [html-show-sidebar-toc]
  )
  .markdown-preview {
  left: 50%;
  transform: translateX(-50%);
}

html
  body[for='html-export']:not([data-presentation-mode]):not(
    [html-show-sidebar-toc]
  )
  .md-sidebar-toc {
  display: none;
}

.doc {
  color: #00a3f5;
  cursor: pointer;
}

li {
  line-height: 24px;
  text-align: justify;
}
p {
  line-height: 22px;
  text-align: justify;
}
</style>
